<template>
  <div class="JudgesTeam">
    <div class="container">
      <div class="pic"><img src="/static/img/test1.png" alt="pic"></div>
      <table cellspacing="0" cellpadding="0">
        <caption>队伍打分1</caption>
        <thead>
          <tr>
            <th>评分方向</th>
            <th>具体内容及指标</th>
            <th>评分</th>
          </tr>
        </thead>
        <tbody>
          <!-- 1 -->
          <tr>
            <th rowspan="3">发<br>现<br>社<br>会<br>问<br>题</th>
            <td>社会问题发生在及本城市。</td>
            <td @click="onJudge(0)">{{ qData[0] }}</td>
          </tr>
          <tr>
            <td>围绕联合国可持续发展目标。</td>
            <td @click="onJudge(1)">{{ qData[1] }}</td>
          </tr>
          <tr>
            <td>对社会问题展开充分的需求评估。</td>
            <td @click="onJudge(2)">{{ qData[2] }}</td>
          </tr>
          <!-- 2 -->
          <tr> 
            <th rowspan="3">提<br>出<br>解<br>决<br>方<br>案</th>
            <td>方案能够回应并改善社会问题。</td>
            <td @click="onJudge(3)">{{ qData[3] }}</td>
          </tr>
          <tr>
            <td>应用了数字化技术。</td>
            <td @click="onJudge(4)">{{ qData[4] }}</td>
          </tr>
          <tr>
            <td>方案具有创新性、可行性和可持续性。</td>
            <td @click="onJudge(5)">{{ qData[5] }}</td>
          </tr>
          <!-- 3 -->
          <tr>
            <th rowspan="3">实<br>验<br>效<br>果</th>
            <td>对所实施的效果做了评估，社会问题得到改善。</td>
            <td @click="onJudge(6)">{{ qData[6] }}</td>
          </tr>
          <tr>
            <td>在当地产生影响力，获得社会广泛关注。</td>
            <td @click="onJudge(7)">{{ qData[7] }}</td>
          </tr>
          <tr>
            <td>所开展的模式可持续改善社会问题。</td>
            <td @click="onJudge(8)">{{ qData[8] }}</td>
          </tr>
          <!-- 4 -->
          <tr>
            <th rowspan="3">团<br>队<br>展<br>示</th>
            <td>展示的内容可视化程度强，排版美观。</td>
            <td @click="onJudge(9)">{{ qData[9] }}</td>
          </tr>
          <tr>
            <td>现场演讲表现力强，思路清晰，准确表达。</td>
            <td @click="onJudge(10)">{{ qData[10] }}</td>
          </tr>
          <tr>
            <td>团队分工合理，充分发挥各自专业优势。</td>
            <td @click="onJudge(11)">{{ qData[11] }}</td>
          </tr>
        </tbody>
      </table>
      <div class="total">总分：<span>{{ total }}</span></div>
      <div class="submit" @click="onSubmit"></div>
    </div>

     <popup-picker :show.sync="showPopupPicker" :data="popupPickerData" @on-change="onJudgeChange"></popup-picker>
  </div>
</template>

<script>
import { PopupPicker } from 'vux'

let q = [
  [1,2,3,4,5],
  [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
  [1,2,3,4,5,6,7,8,9,10],
  [1,2,3,4,5],
  [1,2,3,4,5,6,7,8,9,10],
  [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
  [1,2,3,4,5,6,7,8,9,10],
  [1,2,3,4,5,6,7,8,9,10],
  [1,2,3,4,5,6,7,8,9,10],
  [1,2,3],
  [1,2,3,4],
  [1,2,3]
];

export default {
  name: 'JudgesTeam',
  data () {
    return {
      showPopupPicker: false,
      popupPickerData: [],
      qIndex: 0,
      qData: [0,0,0,0,0,0,0,0,0,0,0,0],
      total: 0 
    }
  },
  methods: {
    onJudge(i) {
      this.qIndex = i;
      this.popupPickerData = [q[i]];
      this.showPopupPicker = true;

    },
    onJudgeChange(v) {
      this.qData[this.qIndex] = parseInt(v[0]);
      this.total = this.qData.reduce((partial, value) => {
        return partial + value;
      });
    },
    onSubmit() {
      this.$http({
        url: '/judge_team/' + this.$route.params.team_id,
        method: 'post',
        data: {
          score: this.total
        },
        headers: {
          authorization: localStorage.getItem('token')
        }
      }).then(({data}) => {
        if (data.code == 0) this.$router.go(-1); 
      });
    }
  },
  components: {
    PopupPicker
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/scss/common.scss";

.JudgesTeam {
  @include bg('/static/img/bg.png');
  box-sizing: border-box;
  padding: 50px 20px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
      display: none;
  }
  .container {
    background: white;
    border-radius: 4px;
    position: relative;
    box-shadow: 2px 2px 10px 2px #aaa;
    .pic {
      position: absolute;
      border: 3px solid white;
      border-radius: 100px;
      height: 65px;
      width: 65px;
      top: -35px;
      left: 50px;
      overflow: hidden;
      box-shadow: 2px 2px 10px 2px #aaa;
      img {
        width: 100%;
        height: 100%;
        border-radius: 100px;
      }
    }
    table {
      font-size: 14px;
      border-collapse:collapse;
      caption {
        height: 50px;
        line-height: 50px;
        font-weight: bold;
      }
      th, td {
        border: 1px solid #ddd;
      }
      th:first-of-type {
        width: 70px;
      }
      th {
        background: #FFF1E8;
      }
      th:last-of-type {
        width: 50px;
      }
      td:last-of-type {
        text-align: center;
      }
      td:first-of-type {
        box-sizing: border-box;
        padding: 5px;
      }
      thead {
        th {
          height: 40px;
        }
      }

    }
    .total {
      text-align: center;
      padding: 20px 0 40px;
      span {
        color: #D68958;
      }
    }
    .submit {
      @include img('/static/img/p3_btn_ok.png', 30%, 5%, center, 97.5%, center, contain, $z: 1);
    }
  }
}
</style>
